<template>
  <div class="toast">{{message}}</div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {

}
export const handleToast = () => {
  const toastData = reactive({ toastMsg: '', showToast: false })
  const changeToastStatus = (message) => {
    toastData.showToast = true
    toastData.toastMsg = message
    setTimeout(() => {
      toastData.showToast = false
    }, 2000)
  }
  return { ...toRefs(toastData), changeToastStatus }
}
</script>

<style lang="scss" scoped>
@import '../style/viriable.scss';
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .1rem;
  background: rgba(0, 0, 0, .35);
  border-radius: .05rem;
  color: $bg-color;
}
</style>
